<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-02 15:58:53
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-02 16:38:12
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <el-table-column
    :filter-method="item.filters && filterHandler"
    :show-overflow-tooltip="!item.wrap"
    v-bind="item"
  >
    <template v-if="!!item.labelSlot" #header="scope">
      <slot :name="item.labelSlot" v-bind="scope"></slot>
    </template>
    <template v-if="!!item.tdSlot" #default="scope">
      <slot :name="item.tdSlot" v-bind="scope"></slot>
    </template>
    <template v-else-if="!!item.children" #default>
      <table-column
        v-for="subItem in item.children"
        :key="subItem.label"
        :is-nest="true"
        :item="subItem"
      >
        <template v-for="slotName in getAllSlots(subItem)" #[slotName]="scope">
          <slot :name="slotName" v-bind="scope"></slot>
        </template>
      </table-column>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: 'TableColumn',
  props: {
    item: {
      type: Object,
      required: true,
    },
    isNest: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    getChildrenSlots(arr) {
      const res = []
      arr.forEach(item => {
        if (item.labelSlot) {
          res.push(item.labelSlot)
        }
        if (item.tdSlot) {
          res.push(item.tdSlot)
        }
        if (item.children) {
          res.push(...this.getChildrenSlots(item.children))
        }
      })

      return res
    },
    getAllSlots(item) {
      const res = []
      if (item.labelSlot) {
        res.push(item.labelSlot)
      }
      if (item.tdSlot) {
        res.push(item.tdSlot)
      }
      if (item.children) {
        res.push(...this.getChildrenSlots(item.children))
      }
      return res
    },
  },
}
</script>
